<template>
  <!-- 头部整体盒子 -->
  <div id="header" class="container-fuild">
    <!-- 头部顶部 -->
    <div class="headContent">
      <div class="header-top container-fuild hidden-xs">
        <div class="top-logo">
          <img src="../../../assets/img/yibanLogo.png"/>
        </div>
        <div class="top-nav">
          <div class="nav-item" :class="{ navItemActive : isActive === 1 }" @click="aboutyiban(0)">首页</div>
          <div class="nav-item" :class="{ navItemActive : isActive === 2 }" @click="aboutyiban(480)">关于益伴</div>
          <div class="nav-item" :class="{ navItemActive : isActive === 3 }" @click="aboutyiban(6000)">立即体验</div>
        </div>
      </div>
    </div>
    <!-- 手机导航 -->
    <div class="container-fuild visible-xs">
      <div class="header-nav-m-logo">
        <div class="yibanHeader">
          <div class="yblogo">
            <div class="ybimg">
              <img :src="ybLogo">
            </div>
            <span class="yiban">益伴APP</span>
          </div>
          <div class="yibanBtn" @click="download">立即下载</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "Header",
    data() {
      return {
        ybLogo: require('../../../assets/img/yblogo.png'),
        isActive: 1
      };
    },
    mounted() {
      const that = this
      document.getElementsByTagName('body')[0].onscroll = function() {
        if(document.documentElement.scrollTop < 600) {
          that.isActive = 1
        }
        if ( document.documentElement.scrollTop > 470 &&  document.documentElement.scrollTop < 5000) {
          that.isActive = 2
        }
        if( document.documentElement.scrollTop > 4680 ) {
          that.isActive = 3
        }
      }
    },
    methods: {
      aboutyiban(num) {
        document.documentElement.scrollTop = num
      },
      // 下载
      download() {
        if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
          let browser = navigator.userAgent.toLowerCase();
          if (browser.match(/micromessenger/i)) {
            // alert('weixin');
            window.location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=com.qingclass.yiban";
            window.setTimeout(function () {
              window.location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=com.qingclass.yiban";
            }, 1000)
            return
          } else {
            window.location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=com.qingclass.yiban"; //ios app协议
            window.setTimeout(function () {
              window.location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=com.qingclass.yiban";
            }, 2000)
            return
          }
        }
        if (navigator.userAgent.match(/android/i)) {
          window.location.href = "app://city_golf";//安卓协议
          window.setTimeout(function () {
            window.location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=com.qingclass.yiban"
          }, 2000)
          return
        }
      }
    }
  };
</script>
<style lang="less" scoped>
  @mobile-header-height:.2rem;
  .header-nav-m-logo{
    position: fixed;
    background: #fff;
    width: 100%;
    z-index: 999999999;
  }
  .yibanHeader{
    padding: .15rem .13rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .yblogo{
    display: flex;
    align-items: center;
    font-size: .16rem;
  }
  .ybimg{
    width: .423rem;
    margin-right: .08rem;
    img{
      width: 100%;
    }
  }
  .yibanBtn{
    background:linear-gradient(318deg,rgba(225,70,56,1) 0%,rgba(255,105,100,1) 100%);
    box-shadow:0px 2px 4px 0px rgba(234,42,54,0.2);
    border-radius:14px;
    font-size: .1rem;
    color: #fff;
    width: .6rem;
    height: .24rem;
    line-height: .24rem;
    text-align: center;
  }
  #header{
    .header-nav-m{
      width: 100%;
      position: fixed;
      height: @mobile-header-height;
      background-color: #ffffff;
      top: 0;
    }
    .nav-blank{
      height: @mobile-header-height;
    }
    .headContent {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      background: #fff;
      z-index: 99;
    }
    .header-top {
      display: flex;
      height: 120px;
      justify-content: space-between;
      align-items: center;
      width: 1130px;
      margin: 0 auto;
      .top-logo{
        img{
          width: 149px;
          height: 60px;
        }
      }
      .top-nav{
        display: flex;
        .nav-item{
          font-size: 20px;
          color:#C6C6C6;
          min-width: 80px;
          cursor: pointer;
        }
        .navItemActive{
          color:#000;
        }
        .nav-item:nth-child(1){
          min-width: 40px;
        }
        .nav-item:nth-child(2){
          margin: 0 90px;
        }
      }
    }
  }
</style>
